// 该变量的作用是使得引用其他插件更简单，如：plugins.uglify = require('gulp-uglify')
// 注意只能用其简写引用 gulp 开头的插件
const plugins = require('gulp-load-plugins')();
const del = require('del')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload

const {
    src,
    dest,
    series,
    watch
} = require('gulp')

// html处理（暂无处理）
function html(cb) {
    src('src/*.html')
        .pipe(dest('./dist'))
        .pipe(reload({ stream: true }))
    cb();
}

// 压缩混淆js
function js(cb) {
    src('src/js/*.js')
        .pipe(plugins.uglify())
        .pipe(dest('./dist/js'))
        .pipe(reload({ stream: true }))
    cb();
}

// 对scss/less编译，压缩，输出css文件
function css(cb) {
    src('src/css/*.scss')
        // 编译压缩sass样式
        .pipe(plugins.sass({
            outputStyle: 'compressed'
        }))
        // 给样式添加浏览器前缀
        // https://github.com/postcss/autoprefixer
        .pipe(plugins.autoprefixer({
            cascade: false,
            remove: false
        }))
        .pipe(dest('./dist/css'))
        .pipe(reload({ stream: true }))
    cb()
}

// 监听文件变化, gulp.watcher无法监听新增加的文件，需要可以参考https://blog.csdn.net/guang_s/article/details/84672449安装使用gulp-watcher
function watcher(cb) {
    watch('src/*.html', html)
    watch('src/js/*.js', js)
    watch('src/css/*.scss', css)
    cb()
}

// 删除dist目录中的内容
function clean(cb) {
    // 注意：del是一个异步操作，返回promise，只有return之后，其他依赖clean的任务才能保证执行顺序
    return del('./dist', cb)
}

// server服务
function serve(cb) {
    browserSync.init({
        server:{
            baseDir: './dist'
        }
    })
    cb()
}

exports.scripts = js
exports.styles = css
exports.clean = clean
exports.default = series([
    clean, html, js, css, serve, watcher
])

// 这里给自己一个任务，给angularjs配置gulp工程化
// 可参考：https://segmentfault.com/a/1190000007445150